<template>
	<div class="history_draw_containers">
		<top_bg>
			<template v-slot:title>
				<p>{{title}}</p>
			</template>
		</top_bg>
		<div class="bg">
		<history_draw_item v-for="(one_item,index) in all_draws" :key="one_item.id">
			<template v-slot:history_draw_item_img>
				<img :src=uploads_url+one_item.thumb class="history_draw_item_img" />
			</template>

			<template v-slot:history_draw_item_text>
				<p class="history_draw_item_text">congratulations</p>
			</template>

			<template v-slot:history_draw_item_desc>
				<p class="history_draw_item_desc_txt2">Winner: {{parseUserStr(one_item.q_user)}}</p>
				<p class="history_draw_item_desc_txt1">Product: {{one_item.title}}</p>
				<p class="history_draw_item_desc_txt3">Ticket Code: {{one_item.q_user_code}}</p>
				<p class="history_draw_item_desc_txt4">Total Tickets: {{one_item.zongrenshu}} person</p>
				<p class="history_draw_item_desc_txt5">Draw Date:{{convertTime(one_item.time)}}</p>
			</template>

		</history_draw_item>
		<!-- 底部导航 -->
		<footer_nav />
		</div>
	</div>
</template>

<script>
	import history_draw_item from '@/components/history_draw_item.vue'; // 请根据你的项目结构修改路径
	import globalData from '../../main';
	import {
		convertUnixToDate
	} from '../../util.js';

	export default {
		components: {
			history_draw_item,
		},
		mounted() {
			//console.log("===history_draw mounted===")
			this.uploads_url = globalData['uploads_url']
			this.getHistory()
		},
		data() {
			return {
				title: "Draws",
				all_draws: {},
				uploads_url: '',
			}
		},
		methods: {
			getHistory: function() {
				var that = this
				//console.log("---getHistory start mobile_url:" + globalData['mobile_url']+'mobile/')
				this.axios({
					method: "GET", // method:"post" data:{"firstName":"Tom","lastName":"Sun"} //get params:{id:123}
					url: globalData['mobile_url'] + 'mobile/'
				}).then(function(response) {
					//console.log("response:", response)
					//console.log("response data:", response.data) //JSON.stringify(data)
					// console.log("response to json:", JSON.stringify(response))
					//var contents = JSON.parse(response.data)	
					///console.log(typeof response.data)
					that.all_draws = response.data[0]
					//console.log("---getHistory response.data.length---:" + response.data.length)
					// for (var i = 0; i < response.data.length; i++) {
					// 	console.log("one item data:", response.data[i])
					// }
				}).catch(function(error) { // 请求失败处理
					console.log("---error start---");
					console.log(error);
					console.log("---error end---");
				});
			},
			parseUserStr: function(userInfo) {
				//console.log("userInfo:",userInfo);
				var infos = userInfo.split(";");
				for (let i = 0; i < infos.length; i++) {
					var values = infos[i].split(":");
					//console.log("values:",values);
					if (values.length == 3) {
						if (values[2].includes("username")) {
							var newValues = infos[i + 1].split(":");
							//console.log("newValues:",newValues);
							if (newValues.length == 3) {
								var newName = newValues[2].replace("\"", '');
								return newName.replace("\"", '');
							}
						}
					}
				}
				return "";
			},
			convertTime: function(timeStamp) {
				return convertUnixToDate(timeStamp)
			},

		}
	}
</script>

<style scoped lang="less">
	.history_draw_containers {
		display: flex;
		flex-direction: column;
		height: 200vh;
		/* 设置主轴方向为列 */
	}

	.bg {
		height: calc(100vh - 6.5rem);
		/* overflow-y: auto; */
		background-color: #f8f8f8;
	}

	.history_draw_item_img {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.history_draw_item_text {
		background: linear-gradient(to right, #FE1B2E, #FF2291);
		-webkit-background-clip: text;
		color: transparent;
		/* 设置字体大小 
		font-weight: bold;*/
		/* 设置字体加粗 */
		font-family: 'PingFang SC';
		font-size: 2rem;
		position: relative;
		text-align: left;
		margin: 0.1rem 0.1rem 0.1rem;
		font-weight: bold;
	}

	.history_draw_item_desc {
		position: relative;
		text-align: left;
		margin: 0.1rem 0.1rem 0.1rem;
		line-height: 1.5;
		/* 调整行间距，可以根据需要调整值 */
	}

	.history_draw_item_desc_txt1 {
		text-align: left;
		font-family: 'PingFang SC';
		/* font-weight: bold; */
		margin: 0.1rem 0.1rem 0.1rem;
		line-height: 1.5;
		/* 调整行间距，可以根据需要调整值 */
		font-size: 1rem;
		color: #000000;
	}

	.history_draw_item_desc_txt2 {
		text-align: left;
		font-family: 'PingFang SC';
		/* font-weight: bold; */
		margin: 0.1rem 0.1rem 0.1rem;
		line-height: 1.5;
		/* 调整行间距，可以根据需要调整值 */
		font-size: 1rem;
		color: #000000;
	}

	.history_draw_item_desc_txt3 {
		text-align: left;
		font-family: 'PingFang SC';
		margin: 0.1rem 0.1rem 0.1rem;
		line-height: 1.5;
		/* 调整行间距，可以根据需要调整值 */
		font-size: 1rem;
		color: #000000;
	}

	.history_draw_item_desc_txt4 {
		text-align: left;
		/*font-size: PingFang-SC-Light;*/
		font-family: 'PingFang SC';
		margin: 0.1rem 0.1rem 0.1rem;
		line-height: 1.5;
		/* 调整行间距，可以根据需要调整值 */
		font-size: 1rem;
		color: #808080;
	}

	.history_draw_item_desc_txt5 {
		text-align: left;
		/*font-size: PingFang-SC-Light*/
		;
		font-family: 'PingFang SC';
		margin: 0.1rem 0.1rem 0.1rem;
		line-height: 1.5;
		font-size: 1rem;
		/* 调整行间距，可以根据需要调整值 */

		color: #808080;
	}
</style>